<template>
    <el-drawer v-model="drawerVisible" title="直播预告详情" direction="rtl" size="80%" :with-header="true"
        style="background: #F7F7F7;">
        <div class="basic-msg">
            <div class="section-title">预告基本信息</div>
            <div class="con">
                <div class="square">
                    <div class="label">直播标题</div>
                    <div class="content">{{ liveDetails.livestreamTitle || '-' }}</div>
                </div>
            </div>
            <div class="con">
                <div class="square">
                    <div class="label">直播封面</div>
                    <div class="content">
                        <img v-if="liveDetails.reservationCover" :src="liveDetails.reservationCover" alt="直播封面">
                        <span v-else>-</span>
                    </div>
                </div>
            </div>
            <div class="con">
                <div class="square">
                    <div class="label">直播时间</div>
                    <div class="content">{{ formatTime(liveDetails.livestreamStartTime) }}</div>
                </div>
            </div>
            <div class="con">
                <div class="square">
                    <div class="label">直播介绍</div>
                    <div class="content">{{ liveDetails.livestreamIntroduce || '-' }}</div>
                </div>
            </div>
            <div class="con">
                <div class="square">
                    <div class="label">直播类型</div>
                    <div class="content">{{ getLiveTypeText(liveDetails.liveType) }}</div>
                </div>
            </div>
            <div class="con">
                <div class="square">
                    <div class="label">审核状态</div>
                    <div class="content">
                        <el-tag :type="getStatusTagType(liveDetails.reviewStatus)">
                            {{ getStatusText(liveDetails.reviewStatus) }}
                        </el-tag>
                    </div>
                </div>
            </div>
            <div class="con" v-if="liveDetails.reviewStatus === 2">
                <div class="square">
                    <div class="label">驳回原因</div>
                    <div class="content">{{ liveDetails.reason || '-' }}</div>
                </div>
            </div>
            <div class="con" v-if="liveDetails.reviewStatus === 0">
                <div style="justify-content: flex-end;display: flex;">
                    <el-button type="danger" size="small" @click="handleAudit(2)">驳回</el-button>
                    <el-button type="primary" size="small" @click="handleAudit(1)">通过</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch } from 'vue'
import { reject, details } from '../api/live'
import { ElMessage, ElMessageBox } from 'element-plus'

const liveDetails = ref({})

// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible', 'audit-success'])

// 抽屉可见性状态
const drawerVisible = ref(props.visible)

// 监听父组件传入的visible变化
watch(() => props.visible, (newVal) => {
    drawerVisible.value = newVal
    if (newVal) {
        fetchLiveDetails()
    }
})

// 监听drawerVisible变化并通知父组件
watch(drawerVisible, (newVal) => {
    emit('update:visible', newVal)
})

// 监听rowData变化
watch(() => props.rowData, () => {
    if (drawerVisible.value) {
        fetchLiveDetails()
    }
}, { deep: true })

// 获取直播详情
const fetchLiveDetails = async () => {
    try {
        const res = await details(props.rowData.id)
        if (res.success) {
            liveDetails.value = res.data || {}
        } else {
            ElMessage.error(res.msg || '获取详情失败')
        }
    } catch (error) {
        ElMessage.error('网络错误，获取详情失败')
        console.error('Error fetching live details:', error)
    }
}

// 格式化时间
const formatTime = (timeString) => {
    if (!timeString) return '-'
    try {
        return new Date(timeString).toLocaleString()
    } catch {
        return timeString
    }
}

// 直播类型文本
const getLiveTypeText = (type) => {
    const types = {
        0: '普通直播',
        1: '带货直播',
        // 可以根据实际需要添加更多类型
    }
    return types[type] || '-'
}

// 审核状态文本
const getStatusText = (status) => {
    switch (status) {
        case 0: return '待审核'
        case 1: return '已通过'
        case 2: return '已驳回'
        default: return '-'
    }
}

// 审核状态标签类型
const getStatusTagType = (status) => {
    switch (status) {
        case 0: return 'warning'
        case 1: return 'success'
        case 2: return 'danger'
        default: return 'info'
    }
}

// 审核操作
async function handleAudit(status) {
    let banReason = ''
    if (status === 2) {
        try {
            const { value } = await ElMessageBox.prompt(
                '请输入驳回原因',
                '驳回',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S+/,
                    inputErrorMessage: '驳回原因不能为空'
                }
            )
            banReason = value.trim()
        } catch {
            return
        }
    }

    try {
        const res = await reject({
            livestreamId: props.rowData.id,
            status,
            banReason
        })
        if (res.success) {
            ElMessage.success(status === 1 ? '已通过' : '已驳回')
            emit('audit-success', { id: props.rowData.id, status })
            // 刷新详情数据
            await fetchLiveDetails()
        } else {
            ElMessage.error(res.msg || '操作失败')
        }
    } catch (e) {
        ElMessage.error('网络异常')
    }
}
</script>

<style scoped lang="scss">
.basic-msg {
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;

    .section-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 15px;
        color: #333;
    }

    .con {
        margin-top: 15px;

        .square {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #EEEEEE;
            padding-bottom: 10px;

            .label {
                font-weight: 500;
                font-size: 14px;
                color: #333333;
                min-width: 100px;
            }

            .content {
                font-weight: 400;
                font-size: 14px;
                color: #79879E;
                text-align: right;
                flex: 1;

                img {
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>